<template>
  <div :class="themeColor === 'red' ? 'theme-red' : themeColor === 'blue' ? 'theme-blue' : 'theme-gold'">
    <!-- 标题栏 -->
    <div :style="{backgroundColor: themeColor === 'red' ? 'rgb(188,17,38)' : themeColor === 'blue' ? '#1976d2' : '#bfa14a', padding: '40px 20px', borderBottom: '1px solid #ebeef5', textAlign: 'left', display: 'flex', alignItems: 'center', justifyContent: 'space-between'}">
      <span style="font-size: 40px; font-weight: bold; color: #FFFFFF;">员工信息报送平台</span>
      
      <!--将换背景颜色按钮 和 全屏按钮 放到一个div块中-->
      <div style="display: flex; align-items: center; margin-left: auto;">
        <el-dropdown @command="setThemeColor">
          <el-button
            size="mini"
            circle
            style="background: transparent; border: none; outline: none; box-shadow: none;"
            :title="'切换主题色'"
          >
            <i class="el-icon-s-operation" style="font-size: 22px; color:#FFFFFF"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="theme in themeList"
              :key="theme.key"
              :command="theme.key"
              :style="{ color: theme.color, fontWeight: themeColor === theme.key ? 'bold' : 'normal' }"
            >
              {{ theme.name }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button
          size="mini"
          circle
          style="background: transparent; border: none; outline: none; box-shadow: none; margin-left: 0;"
          :title="'全屏切换'"
          @click="toggleFullScreen"
        >
          <i class="el-icon-full-screen" style="font-size: 22px; color:#FFFFFF"></i>
        </el-button>
      </div>
    </div>
    <div style="padding: 0 20px;">

      
      <!-- 查询/搜索区域 -->
      <el-row justify="start" style="margin-top: 60px; margin-bottom: 20px;">
        <el-form :inline="true" :model="searchForm" class="search-form-row">
          <el-form-item label="入职起始时间">
            <el-date-picker
              v-model="searchForm.entryDate"
              type="date"
              placeholder="选择入职起始时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="入职截止时间">
            <el-date-picker
              v-model="searchForm.leaveDate"
              align="right"
              type="date"
              placeholder="选择入职截止时间"
              :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button :style="{ backgroundColor: themeColor === 'red' ? 'rgb(211,47,47)' : themeColor === 'blue' ? '#1976d2' : '#bfa14a', borderColor: themeColor === 'red' ? 'rgb(211,47,47)' : themeColor === 'blue' ? '#1976d2' : '#bfa14a', color: '#fff' }" @click="onSubmit">
              <i class="el-icon-search"></i> 查询
            </el-button>
          </el-form-item>
          <el-form-item>
            <el-button @click="onReset">
              <i class="el-icon-refresh"></i> 重置
            </el-button>
          </el-form-item>
        </el-form>
      </el-row>

      <!-- 分割线 -->
      <div style="height: 8px; background-color: #dcdfe6; margin: 20px 0;"></div>

      <!-- 操作按钮区域 -->
      <el-row justify="start" style="margin-bottom: 10px;" class="operation-buttons-row">
        <el-button :style="{ backgroundColor: themeColor === 'red' ? 'rgb(211,47,47)' : themeColor === 'blue' ? '#1976d2' : '#bfa14a', borderColor: themeColor === 'red' ? 'rgb(211,47,47)' : themeColor === 'blue' ? '#1976d2' : '#bfa14a', color: '#fff' }" @click="handleAdd">
          <i class="el-icon-plus"></i> 新增员工信息
        </el-button>
        <el-button :style="{ backgroundColor: themeColor === 'red' ? 'rgb(211,47,47)' : themeColor === 'blue' ? '#1976d2' : '#bfa14a', borderColor: themeColor === 'red' ? 'rgb(211,47,47)' : themeColor === 'blue' ? '#1976d2' : '#bfa14a', color: '#fff' }" @click="handleBatchDelete">
          <i class="el-icon-delete"></i> 批量删除
        </el-button>
        <el-button :style="{ backgroundColor: themeColor === 'red' ? 'rgb(211,47,47)' : themeColor === 'blue' ? '#1976d2' : '#bfa14a', borderColor: themeColor === 'red' ? 'rgb(211,47,47)' : themeColor === 'blue' ? '#1976d2' : '#bfa14a', color: '#fff' }" @click="downloadTemplate">
          <i class="el-icon-download"></i> 下载模板
        </el-button>
        <el-button :style="{ backgroundColor: themeColor === 'red' ? 'rgb(211,47,47)' : themeColor === 'blue' ? '#1976d2' : '#bfa14a', borderColor: themeColor === 'red' ? 'rgb(211,47,47)' : themeColor === 'blue' ? '#1976d2' : '#bfa14a', color: '#fff' }" @click="importExcel">
          <i class="el-icon-upload2"></i> 导入数据
        </el-button>
        <el-button :style="{ backgroundColor: themeColor === 'red' ? 'rgb(211,47,47)' : themeColor === 'blue' ? '#1976d2' : '#bfa14a', borderColor: themeColor === 'red' ? 'rgb(211,47,47)' : themeColor === 'blue' ? '#1976d2' : '#bfa14a', color: '#fff' }" @click="convertData">
          <i class="el-icon-refresh"></i> 数据转换
        </el-button>
        <el-button style="margin-left: 10px;" @click="exportExcel">
          <i class="el-icon-download"></i> 导出报送表全部数据
        </el-button>
        <el-button style="margin-left: 10px;" @click="handleViewEmployeesSubmit">
          <i class="el-icon-document"></i> 查看填报表数据
        </el-button>
      </el-row>

      <!-- 分割线 -->
      <div style="height: 8px; background-color: #dcdfe6; margin: 20px 0;"></div>

      <!-- 表格区域 -->
      <el-table
        ref="table"
        :data="paginatedTableData"
        stripe
        style="width: 100%; margin-top: 20px;"
        v-loading="loading">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="employeeId"
          label="员工编号"
          width="180"
          align="center">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="180"
          align="center">
        </el-table-column>
        <el-table-column
          prop="gender"
          label="性别"
          width="180"
          align="center">
        </el-table-column>
        <el-table-column
          prop="age"
          label="年龄"
          width="180"
          align="center">
        </el-table-column>
        <el-table-column
          prop="department"
          label="部门"
          width="180"
          align="center">
        </el-table-column>
        <el-table-column
          prop="position"
          label="职务"
          width="180"
          align="center">
        </el-table-column>
        <el-table-column
          prop="entryDate"
          label="入职时间"
          width="120"
          align="center">
          <template slot-scope="scope">
            {{ scope.row.entryDate ? formatDate(scope.row.entryDate) : '' }}
          </template>
        </el-table-column>

        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" :style="{ color: themeColor === 'red' ? '#fb620f' : themeColor === 'blue' ? '#1976d2' : '#bfa14a', fontWeight: 'bold' }" @click="handleView(scope.row)">
              <i class="el-icon-view" style="font-weight: bolder;"></i>
            </el-button>
            <el-button type="text" size="small" :style="{ color: themeColor === 'red' ? '#fb620f' : themeColor === 'blue' ? '#1976d2' : '#bfa14a', fontWeight: 'bold' }" @click="handleEdit(scope.row)">
              <i class="el-icon-edit" style="font-weight: bolder;"></i>
            </el-button>
            <el-button type="text" size="small" :style="{ color: themeColor === 'red' ? '#fb620f' : themeColor === 'blue' ? '#1976d2' : '#bfa14a', fontWeight: 'bold' }" @click="handleDelete(scope.row)">
              <i class="el-icon-delete" style="font-weight: bolder;"></i>
            </el-button>
            <el-button type="text" size="small" :style="{ color: themeColor === 'red' ? '#fb620f' : themeColor === 'blue' ? '#1976d2' : '#bfa14a', fontWeight: 'bold' }" @click="handleCopy(scope.row)">
              <i class="el-icon-document-copy" style="font-weight: bolder;"></i>
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <el-pagination
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[8, 16, 32, 64]"
        style="margin-top: 20px; text-align: right;">
      </el-pagination>
    </div>

    <!-- 新增员工信息弹窗 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose">
      <el-form :model="newEmployeeForm" ref="newEmployeeForm" label-width="100px">
        <el-form-item label="员工编号" prop="employeeId" :rules="[
            { required: true, message: '员工编号不能为空', trigger: 'blur' },
            { type: 'number', message: '员工编号必须为数字', trigger: 'blur' }
          ]">
          <el-input v-model.number="newEmployeeForm.employeeId" placeholder="请输入员工编号" :disabled="dialogMode === 'view' || dialogMode === 'edit'"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name" :rules="[
            { required: true, message: '姓名不能为空', trigger: 'blur' }
          ]">
          <el-input v-model="newEmployeeForm.name" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender" :rules="[
            { required: true, message: '请选择性别', trigger: 'change' }
          ]">
          <el-select v-model="newEmployeeForm.gender" placeholder="请选择性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="年龄" prop="age" :rules="[
            { required: true, message: '年龄不能为空', trigger: 'blur' },
            { type: 'number', message: '年龄必须为数字', trigger: 'blur' },
            { validator: (rule, value, callback) => {
                if (!value) {
                  callback()
                  return
                }
                const age = Number(value)
                if (isNaN(age)) {
                  callback('年龄必须是数字')
                  return
                }
                if (age < 18 || age > 100) {
                  callback('年龄必须在18-100岁之间')
                  return
                }
                callback()
              }, trigger: 'blur' }
          ]">
          <el-input v-model.number="newEmployeeForm.age" placeholder="请输入年龄"></el-input>
        </el-form-item>
        <el-form-item label="部门" prop="department" :rules="[
            { required: true, message: '部门不能为空', trigger: 'blur' }
          ]">
          <el-input v-model="newEmployeeForm.department" placeholder="请输入部门"></el-input>
        </el-form-item>
        <el-form-item label="职务" prop="position" :rules="[
            { required: true, message: '职务不能为空', trigger: 'blur' }
          ]">
          <el-input v-model="newEmployeeForm.position" placeholder="请输入职务"></el-input>
        </el-form-item>
        <el-form-item label="入职时间" prop="entryDate" :rules="[
            { required: true, message: '请选择入职时间', trigger: 'change' }
          ]">
          <el-date-picker
            v-model="newEmployeeForm.entryDate"
            type="date"
            placeholder="选择入职时间"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelForm">取消</el-button>
        <el-button type="primary" @click="submitForm" v-if="dialogMode !== 'view'">确定</el-button>
      </span>
    </el-dialog>

    <!-- 填报表数据弹窗 -->
    <el-dialog
      title="报送表数据"
      :visible.sync="submitDialogVisible"
      width="80%"
      :before-close="() => { submitDialogVisible = false }">
      <!-- 日期筛选器和导出按钮区域 -->
      <div style="margin-bottom: 10px; text-align: left;">
        <el-button :style="{ backgroundColor: themeColor === 'red' ? 'rgb(211,47,47)' : themeColor === 'blue' ? '#1976d2' : '#bfa14a', borderColor: themeColor === 'red' ? 'rgb(211,47,47)' : themeColor === 'blue' ? '#1976d2' : '#bfa14a', color: '#fff' }" @click="resetSubmitDataFilter">重置</el-button>
        <el-date-picker
          v-model="exportDateFilter"
          type="date"
          placeholder="选择报送日期"
          value-format="yyyy-MM-dd">
        </el-date-picker>
        <el-button :style="{ backgroundColor: themeColor === 'red' ? 'rgb(211,47,47)' : themeColor === 'blue' ? '#1976d2' : '#bfa14a', borderColor: themeColor === 'red' ? 'rgb(211,47,47)' : themeColor === 'blue' ? '#1976d2' : '#bfa14a', color: '#fff' }" @click="filterSubmitDataByDate">根据报送日期展示数据</el-button>
        <el-button :style="{ backgroundColor: themeColor === 'red' ? 'rgb(211,47,47)' : themeColor === 'blue' ? '#1976d2' : '#bfa14a', borderColor: themeColor === 'red' ? 'rgb(211,47,47)' : themeColor === 'blue' ? '#1976d2' : '#bfa14a', color: '#fff' }" @click="exportDataByDate">按日期选择数据导出</el-button>
        <el-button :style="{ backgroundColor: themeColor === 'red' ? 'rgb(211,47,47)' : themeColor === 'blue' ? '#1976d2' : '#bfa14a', borderColor: themeColor === 'red' ? 'rgb(211,47,47)' : themeColor === 'blue' ? '#1976d2' : '#bfa14a', color: '#fff', marginLeft: '50px' }" @click="exportSubmitData">选中具体数据导出</el-button>
      </div>
      <el-table
        :data="submitTableData"
        stripe
        style="width: 100%;"
        @selection-change="handleSubmitSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="employeeId"
          label="员工编号"
          width="180"
          align="center">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="180"
          align="center">
        </el-table-column>
        <el-table-column
          prop="gender"
          label="性别"
          width="180"
          align="center">
        </el-table-column>
        <el-table-column
          prop="age"
          label="年龄"
          width="180"
          align="center">
        </el-table-column>
        <el-table-column
          prop="department"
          label="部门"
          width="180"
          align="center">
        </el-table-column>
        <el-table-column
          prop="position"
          label="职务"
          width="180"
          align="center">
        </el-table-column>
        <el-table-column
          prop="entryDate"
          label="入职时间"
          width="120"
          align="center">
          <template slot-scope="scope">
            {{ scope.row.entryDate ? formatDate(scope.row.entryDate) : '' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="fileDate"
          label="报送日期"
          width="120"
          align="center">
          <template slot-scope="scope">
            {{ scope.row.fileDate ? formatDate(scope.row.fileDate) : '' }}
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleCurrentChangeSubmit"
        @size-change="handleSizeChangeSubmit"
        :current-page="currentPageSubmit"
        :page-size="pageSizeSubmit"
        :total="totalSubmit"
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[8, 16, 32, 64]"
        style="margin-top: 20px; text-align: right;">
      </el-pagination>
      <span slot="footer" class="dialog-footer">
        <el-button @click="submitDialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>


<script>
import api from '../comm.js'
import * as XLSX from 'xlsx'

  export default {
    data() {
      return {
        searchForm: {
          entryDate: '',
          leaveDate: ''
        },
        currentPage: 1,
        pageSize: 8,
        total: 0,
        loading: false,
        tableData: [],
        dialogVisible: false,
        dialogTitle: '',
        dialogMode: 'add', 
        newEmployeeForm: {
          employeeId: '',
          name: '',
          gender: '',
          age: '',
          department: '',
          position: '',
          entryDate: ''
        },
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now()
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date())
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }]
        },
        errorMessage: '',
        submitTableData: [],
        submitDialogVisible: false,
        selectedSubmitRows: [],
        exportDateFilter: '',
        currentPageSubmit: 1,
        pageSizeSubmit: 8,
        totalSubmit: 0,
        themeColor: 'red',
        themeList: [
          { key: 'red', name: '红色', color: 'rgb(211,47,47)' },
          { key: 'blue', name: '蓝色', color: '#1976d2' },
          { key: 'gold', name: '金色', color: '#bfa14a' }
        ]
      }
    },
    computed: {
      paginatedTableData() {
        return this.tableData
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      // 获取员工列表数据
      async fetchData() {
        try {
          this.loading = true
          this.errorMessage = ''
          const response = await api.getEmployees(this.currentPage, this.pageSize)
          this.tableData = response.employees
          this.total = response.totalCount
        } catch (error) {
          this.errorMessage = '获取员工列表失败：' + (error.response?.data?.message || error.message)
          this.$message.error(this.errorMessage)
        } finally {
          this.loading = false
        }
      },

      // 根据日期范围筛选
      async onSubmit() {
        if (!this.searchForm.entryDate || !this.searchForm.leaveDate) {
          this.$message.warning('请选择完整的日期范围')
          return
        }
        try {
          this.loading = true
          this.errorMessage = ''
          const response = await api.filterEmployeesByDate(
            this.searchForm.entryDate,
            this.searchForm.leaveDate,
            this.currentPage,
            this.pageSize
          )
          this.tableData = response.employees
          this.total = response.totalCount
        } catch (error) {
          this.errorMessage = '筛选数据失败：' + (error.response?.data?.message || error.message)
          this.$message.error(this.errorMessage)
        } finally {
          this.loading = false
        }
      },

      // 重置搜索
      onReset() {
        this.searchForm.entryDate = ''
        this.searchForm.leaveDate = ''
        this.fetchData()
      },

      // 处理页码变化
      handleCurrentChange(val) {
        this.currentPage = val
        if (this.searchForm.entryDate && this.searchForm.leaveDate) {
          this.onSubmit()
        } else {
          this.fetchData()
        }
      },

      // 新增员工
      handleAdd() {
        this.dialogMode = 'add'
        this.dialogTitle = '新增员工信息'
        this.dialogVisible = true
        this.newEmployeeForm = {
          employeeId: '',
          name: '',
          gender: '',
          age: '',
          department: '',
          position: '',
          entryDate: ''
        }
      },

      // 编辑员工
      handleEdit(row) {
        this.dialogMode = 'edit'
        this.dialogTitle = '编辑员工信息'
        this.dialogVisible = true
        this.newEmployeeForm = { ...row }
      },

      // 查看员工
      handleView(row) {
        this.dialogMode = 'view'
        this.dialogTitle = '查看员工信息'
        this.dialogVisible = true
        this.newEmployeeForm = { ...row }
      },

      // 删除员工
      async handleDelete(row) {
        try {
          await this.$confirm('确认删除该员工信息吗？', '提示', {
            type: 'warning'
          })
          this.errorMessage = ''
          await api.deleteEmployee(row.employeeId)
          this.$message.success('删除成功')
          this.fetchData()
        } catch (error) {
          if (error !== 'cancel') {
            this.errorMessage = '删除失败：' + (error.response?.data?.message || error.message)
            this.$message.error(this.errorMessage)
          }
        }
      },

      // 提交表单
      async submitForm() {
        try {
          await this.$refs.newEmployeeForm.validate()
          this.errorMessage = ''
          if (this.dialogMode === 'add' || this.dialogMode === 'copy') {
            await api.addEmployee(this.newEmployeeForm)
            this.$message.success('添加成功')
          } else if (this.dialogMode === 'edit') {
            await api.updateEmployee(this.newEmployeeForm)
            this.$message.success('更新成功')
          }
          this.dialogVisible = false
          this.fetchData()
        } catch (err) {
          if (err.response && err.response.status === 500) {
            this.$message.error('员工编号已存在，请使用其他编号')
          } else {
            const errorMsg = err.response?.data?.msg || '操作失败'
            this.errorMessage = errorMsg
            this.$message.error(errorMsg)
          }
        }
      },

      // 取消表单
      cancelForm() {
        this.dialogVisible = false
        this.$refs.newEmployeeForm.resetFields()
      },

      // 关闭对话框
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(() => {
            this.cancelForm()
            done()
          })
          .catch(() => {})
      },

      // 下载模板
      async downloadTemplate() {
        try {
          this.errorMessage = ''
          const response = await api.downloadTemplate()
          const blob = new Blob([response], { type: 'application/vnd.ms-excel' })
          const link = document.createElement('a')
          link.href = window.URL.createObjectURL(blob)
          link.download = '员工信息报送表模板.xlsx'
          link.click()
          window.URL.revokeObjectURL(link.href)
        } catch (error) {
          this.errorMessage = '下载模板失败：' + (error.response?.data?.message || error.message)
          this.$message.error(this.errorMessage)
        }
      },

      // 导入数据
      async importExcel() {
        try {
          this.errorMessage = ''
          const input = document.createElement('input')
          input.type = 'file'
          input.accept = '.xlsx,.xls'
          input.onchange = async (e) => {
            const file = e.target.files[0]
            if (file) {
              await api.importExcel(file)
              this.$message.success('导入成功')
              this.fetchData()
            }
          }
          input.click()
        } catch (error) {
          this.errorMessage = '导入失败：' + (error.response?.data?.message || error.message)
          this.$message.error(this.errorMessage)
        }
      },

      // 导出数据
      async exportExcel() {
        try {
          this.errorMessage = ''
          const response = await api.exportExcel()
          const blob = new Blob([response], { type: 'application/vnd.ms-excel' })
          const link = document.createElement('a')
          link.href = window.URL.createObjectURL(blob)
          link.download = '员工信息报送表.xlsx'
          link.click()
          window.URL.revokeObjectURL(link.href)
        } catch (error) {
          this.errorMessage = '导出失败：' + (error.response?.data?.message || error.message)
          this.$message.error(this.errorMessage)
        }
      },

      // 数据转换
      async convertData() {
        try {
          this.errorMessage = ''
          await api.convertData()
          this.$message.success('数据转换成功')
        } catch (error) {
          this.errorMessage = '数据转换失败：' + (error.response?.data?.message || error.message)
          this.$message.error(this.errorMessage)
        }
      },

      // 批量删除
      async handleBatchDelete() {
        try {
          await this.$confirm('确认批量删除选中的员工信息吗？', '提示', {
            type: 'warning'
          })
          this.errorMessage = ''
          const selectedRows = this.$refs.table.selection
          if (selectedRows.length === 0) {
            this.$message.warning('请选择要删除的员工')
            return
          }
          await api.deleteEmployees(selectedRows.map(row => row.employeeId))
          this.$message.success('批量删除成功')
          this.fetchData()
        } catch (error) {
          if (error !== 'cancel') {
            this.errorMessage = '批量删除失败：' + (error.response?.data?.message || error.message)
            this.$message.error(this.errorMessage)
          }
        }
      },

      // 新增一个查看填报表数据的方法
      async handleViewEmployeesSubmit() {
        // 重置日期筛选和当前页码，然后获取数据
        this.exportDateFilter = '';
        this.currentPageSubmit = 1;
        this.submitDialogVisible = true; // 显示弹窗
        this.fetchSubmitTableData(this.currentPageSubmit, this.pageSizeSubmit);
      },

      // 处理报送表数据选中项变化
      handleSubmitSelectionChange(selection) {
        this.selectedSubmitRows = selection;
      },

      // 导出选中的报送表数据到Excel
      exportSubmitData() {
        if (this.selectedSubmitRows.length === 0) {
          this.$message.warning('请至少选择一行数据进行导出！');
          return;
        }

        const headers = ['员工编号', '姓名', '性别', '年龄', '部门', '职务', '入职时间', '报送日期'];
        const data = this.selectedSubmitRows.map(row => [
          row.employeeId,
          row.name,
          row.gender,
          row.age,
          row.department,
          row.position,
          row.entryDate ? row.entryDate.split('T')[0] : '',
          row.fileDate ? row.fileDate.split('T')[0] : ''
        ]);

        
        const ws_data = [headers, ...data];
        const ws = XLSX.utils.aoa_to_sheet(ws_data);
        const wb = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(wb, ws, "报送表数据");

        XLSX.writeFile(wb, "报送表数据.xlsx");

        this.$message.success('数据已导出到 Excel');
      },

      // 导出选中的报送表数据到Excel (按日期筛选)
      exportDataByDate() {
        if (!this.exportDateFilter) {
          this.$message.warning('请选择要导出的报送日期');
          return;
        }

        if (this.submitTableData && this.submitTableData.length > 0) {
          const filteredData = this.submitTableData.filter(row => row.fileDate && row.fileDate.split('T')[0] === this.exportDateFilter);

          if (filteredData.length === 0) {
            this.$message.warning('所选日期没有对应的报送数据');
            return;
          }

          const headers = ['员工编号', '姓名', '性别', '年龄', '部门', '职务', '入职时间', '报送日期'];
          const data = filteredData.map(row => [
            row.employeeId,
            row.name,
            row.gender,
            row.age,
            row.department,
            row.position,
            row.entryDate ? row.entryDate.split('T')[0] : '',
            row.fileDate ? row.fileDate.split('T')[0] : ''
          ]);

         
          const ws_data = [headers, ...data];
          const ws = XLSX.utils.aoa_to_sheet(ws_data);
          const wb = XLSX.utils.book_new();
          XLSX.utils.book_append_sheet(wb, ws, `报送表数据_${this.exportDateFilter}`);

          XLSX.writeFile(wb, `报送表数据_${this.exportDateFilter}.xlsx`);

          this.$message.success('数据已按日期导出到 Excel');
        } else {
          this.$message.warning('没有可用的报送表数据');
        }
      },

      // 处理报送表数据页码变化
      handleCurrentChangeSubmit(val) {
        this.currentPageSubmit = val;
        // 如果存在日期筛选，则按日期筛选并获取当前页数据；否则，获取所有数据的当前页
        if (this.exportDateFilter) {
          this.fetchSubmitTableData(this.currentPageSubmit, this.pageSizeSubmit, this.exportDateFilter);
        } else {
          this.fetchSubmitTableData(this.currentPageSubmit, this.pageSizeSubmit);
        }
      },

      // 新增一个根据报送日期展示数据的方法
      async filterSubmitDataByDate() {
        if (!this.exportDateFilter) {
          this.$message.warning('请选择报送日期');
          return;
        }
        // 重置当前页码到第一页
        this.currentPageSubmit = 1;
        console.log('发送到后端的报送日期:', this.exportDateFilter);
        this.fetchSubmitTableData(this.currentPageSubmit, this.pageSizeSubmit, this.exportDateFilter);
      },

      // 重置报送表数据筛选
      resetSubmitDataFilter() {
        this.exportDateFilter = '';
        // 重置当前页码到第一页
        this.currentPageSubmit = 1;
        this.fetchSubmitTableData(this.currentPageSubmit, this.pageSizeSubmit);
      },

      // 新增一个格式化日期的方法
      formatDate(dateString) {
        if (!dateString) return '';
        const date = new Date(dateString);
        return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
      },

      // 通用方法：获取填报表数据
      async fetchSubmitTableData(page, size, dateFilter = null) {
        try {
          this.loading = true;
          let response;
          if (dateFilter) {
            response = await api.viewEmployeesSubmitByDate(dateFilter, page, size);
          } else {
            response = await api.viewEmployeesSubmit(page, size);
          }

          if (response && response.code === 200) {
            this.$message.success('获取填报表数据成功');
            this.submitTableData = response.data;
            this.totalSubmit = response.totalCount;
          } else {
            this.$message.error(response.msg || '获取填报表数据失败');
          }
        } catch (error) {
          console.error('获取填报表数据失败:', error);
          this.$message.error('获取填报表数据失败');
        } finally {
          this.loading = false;
        }
      },

      handleSizeChange(newSize) {
        this.pageSize = newSize;
        this.currentPage = 1;
        this.fetchData();
      },

      handleSizeChangeSubmit(newSize) {
        this.pageSizeSubmit = newSize;
        this.currentPageSubmit = 1;
        this.fetchSubmitTableData(this.currentPageSubmit, this.pageSizeSubmit, this.exportDateFilter);
      },

      handleCopy(row) {
        this.dialogMode = 'copy';
        this.dialogTitle = '复制员工信息';
        // 复制当前行数据到表单，员工编号清空
        this.newEmployeeForm = { ...row, employeeId: '' };
        this.dialogVisible = true;
      },

      setThemeColor(key) {
        this.themeColor = key;
      },

      toggleFullScreen() {
        const elem = document.documentElement;
        if (
          !document.fullscreenElement &&
          !document.mozFullScreenElement &&
          !document.webkitFullscreenElement &&
          !document.msFullscreenElement
        ) {
          if (elem.requestFullscreen) {
            elem.requestFullscreen();
          } else if (elem.mozRequestFullScreen) {
            elem.mozRequestFullScreen();
          } else if (elem.webkitRequestFullscreen) {
            elem.webkitRequestFullscreen();
          } else if (elem.msRequestFullscreen) {
            elem.msRequestFullscreen();
          }
        } else {
          if (document.exitFullscreen) {
            document.exitFullscreen();
          } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
          } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
          } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
          }
        }
      }
      
    }
  }
</script>

<style lang="less">
  .el-dialog__body {
    padding-top: 20px !important;
  }

  .operation-buttons-row {
    display: flex;
    gap: 10px; /* 调整按钮间距 */
  }

  .search-form-row {
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    gap: 10px; /* 调整表单项之间的间距 */
    width: 100%; /* 确保占据完整宽度 */
    justify-content: flex-start; /* 确保内容左对齐 */
  }

  /* 针对 el-form-item 中的按钮，移除默认的 margin-right */
  .search-form-row .el-form-item {
    margin-right: 0 !important;
    margin-bottom: 0 !important; /* 确保底部没有额外间距 */
  }

  /* 表格行悬停背景色，支持主题色切换 */
  .theme-red .el-table__body tr:hover > td {
    background: #ffeaea !important;
  }
  .theme-blue .el-table__body tr:hover > td {
    background: #e3f2fd !important;
  }
  .theme-gold .el-table__body tr:hover > td {
    background: #fff8e1 !important;
  }

  .theme-red .el-table__body .el-button--text:hover {
    color: #d32f2f !important;
  }
  .theme-blue .el-table__body .el-button--text:hover {
    color: #0d47a1 !important;
  }
  .theme-gold .el-table__body .el-button--text:hover {
    color: #8d6e63 !important;
  }

  /*
   * 主题色切换下，表格复选框选中时的颜色也跟随主题色变化
   * 使用 ::v-deep 适配 <style scoped>，确保样式能穿透到 Element UI 组件内部
   * 用 .el-table .el-checkbox__input.is-checked .el-checkbox__inner 提高优先级
   */
  .theme-red ::v-deep .el-table .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: rgb(211,47,47) !important;
    border-color: rgb(211,47,47) !important;
  }
  .theme-blue ::v-deep .el-table .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: #1976d2 !important;
    border-color: #1976d2 !important;
  }
  .theme-gold ::v-deep .el-table .el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: #bfa14a !important;
    border-color: #bfa14a !important;
  }
  /* 选中对号颜色也跟随主题色，统一为白色 */
  .theme-red ::v-deep .el-table .el-checkbox__input.is-checked .el-checkbox__inner::after,
  .theme-blue ::v-deep .el-table .el-checkbox__input.is-checked .el-checkbox__inner::after,
  .theme-gold ::v-deep .el-table .el-checkbox__input.is-checked .el-checkbox__inner::after {
    border-color: #fff !important;
  }


</style>


